<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Divider from "./Divider.svelte";
    import { fn } from "storybook/test";

    const { Story } = defineMeta({
        title: "Components/Base/Divider",
        component: Divider,
        tags: ["autodocs"],
        argTypes: {
            dir: {
                control: "select",
                options: ["v", "h"],
                table: {
                    defaultValue: { summary: "h" },
                },
            },
            align: {
                control: "select",
                options: ["left", "right", ""],
            },
            theme: {
                control: "select",
                options: ["primary", "success", "warning", "error", "info", "blue", "green", "red", "yellow", "pink", "magenta", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"],
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <section style="width: 400px">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
            <Divider />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
            <Divider dashed />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
            <Divider>分割线</Divider>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
        </section>
    {/snippet}
</Story>

<Story name="Vertical">
    {#snippet template(args)}
        <section>
            <span>苹果</span>
            <Divider dir="v" />
            <span>香蕉</span>
            <Divider dir="v" />
            <span>芒果</span>
        </section>
    {/snippet}
</Story>

<Story name="Align" args={{ align: "left" }}>
    {#snippet template(args)}
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
            <Divider {...args}>分割线</Divider>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
        </section>
    {/snippet}
</Story>

<Story name="Margin" args={{ margin: 10 }}>
    {#snippet template(args)}
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
            <Divider {...args}>分割线</Divider>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
        </section>
    {/snippet}
</Story>

<Story name="Themes">
    {#snippet template(args)}
        <section>
            {#each ["primary", "success", "info", "warning", "error", "blue", "green", "red", "yellow", "magenta", "pink", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"] as color}
                <Divider align="left" theme={color}>{color}</Divider>
            {/each}
            <p>自定义颜色.</p>
            {#each ["#f50", "#2db7f5", "#87d068", "#108ee9"] as color}
                <Divider align="left" theme={color}>{color}</Divider>
            {/each}
        </section>
    {/snippet}
</Story>
